import React, { Component } from 'react'
import {
    View,
    Text,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchOpacity
} from 'react-native'
import moment from 'moment';
import Toast from 'react-native-root-toast'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getDetail, initialDetail } from '../../actions/SaleAction';

import Loading from '../../views/loading';
import CellItem from '../../views/cellItem';
import CellTitleItem from '../../views/cellTitleItem';
import GoodItem from '../../views/goodItem';
import CellImages from '../../views/cellImages';
import Style from '../../utils/style/style';
import WXStyle from '../../utils/style/wxstyle'
class SaleDetail extends Component {
    constructor(props) {
        super(props)
    }
    static navigationOptions = {
        title: '销售单详情'
    }
    componentDidMount() {
        //获取销售详情
        const item = this.props.navigation.getParam("item");
        this.props.initialDetail(item)
        this._getDetail(item.SaleId)
    }

    _getDetail(SaleId) {
        let params = {
            api: "erp_salelist",
            filter: "SaleId eq " + SaleId,
            select: "RecId,SaleId,GoodId,UnitPrice,SNumber,list_id",
            expand: "salelist_archives($expand=archives_file),salelist_out($select=BarCode)"
        }
        this.props.getDetail(params);
    };
    _renderGood(item, index, length) {
        const detailList = [
            { key: '货号', value: item.Code },
            { key: '待出库存', value: item.SNumber - item.outs ? item.SNumber - item.outs : 0 },
            { key: '销售数量', value: item.SNumber },
            { key: '销售单价', value: item.UnitPrice / 100 }
        ]
        const noBorder = index == length - 1 ? true : false
        return (
            <GoodItem
                source={item.images[0]}
                name={item.Name}
                key={item.Name}
                showAngle={true}
                detailList={detailList}
                pressItem={() => { this._pressGoodItem(item, detailList) }}
                noBorder={noBorder}
            />
        )

    }
    _pressGoodItem(item, detailList) {
        // if(item.SNumber - item.outs == 0){
        //     Toast.show("该商品已全部出库", {
        //         duration: Toast.durations.LONG,
        //         position: Toast.positions.CENTER,
        //     })
        //     return
        // }
        item.detailList = detailList;
        const { SaleId, RecId } = this.props.data
        this.props.navigation.navigate('Delivery', { item: JSON.stringify(item), SaleId: SaleId, RecId: RecId });
    }
    render() {
        const { data ,saleSlist} = this.props;
        const sale_time = data ? moment(data.sale_time).format('YYYY-MM-DD') : null;
        return (
            this.props.loading ?
                <Loading /> :
                this.props.data ?
                    <ScrollView style={styles.container}>
                        <View style={Style.gap} />
                        <CellItem title="客户" content={data.customer.Name} noBorder={true} />
                        <CellTitleItem title="销售商品" />
                        <View style={styles.goodList}>
                            {saleSlist.map((item, index) => this._renderGood(item, index, saleSlist.length))}
                        </View>
                        <View style={Style.gap} />
                        <CellItem title="销售总价" content={data.TotalPrice ? '￥' + data.TotalPrice/100 : '￥' + 0} />
                        <CellItem title="实际收款" content={data.ActualAmount ? '￥' + data.ActualAmount/100 : '￥' + 0} />
                        <CellItem title="欠我金额" content={data.customer.Arrears ? '￥' + data.customer.Arrears/100 : '￥' + 0} />
                        <CellItem title="业务日期" content={sale_time} noBorder={true} />
                        <CellTitleItem title="备注" />
                        <View style={styles.remarkView}><Text style={styles.remarks}>{data.Remarks}</Text></View>
                        <CellImages images={data.images}/>
                    </ScrollView> : null
        )
    }
}

const styles = StyleSheet.create({
    container: {
        width: Style.width,
        height: Style.ViewHeightD,
        backgroundColor: '#fff',
    },
    goodList: {

    },
    remarkView: {
        height: 95,
    },
    remarks: {
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 15,
        paddingRight: 15,
        fontSize: 17,
        color: '#000'
    }
})
export default connect(
    state => ({
        loading: state.Sale.loading,
        data: state.Sale.SaleDetail,
        saleSlist:state.Sale.saleSlist
    }),
    dispatch => ({
        getDetail: bindActionCreators(getDetail, dispatch),
        initialDetail: bindActionCreators(initialDetail, dispatch)
    })
)(SaleDetail)